<template>
  <div class="container">
    <UnifyTitle :titlevalue="titlevalue" :leftmodel="true"/>

    <base-header ref="baseheader" @onSearch="onSearch"></base-header>


    <Card dis-hover>
      <div
        class="flex bgFFF space-between color000 pl20 pr20 pt16 btn-section"
        style="position: relative; z-index: 10"
      >
        <div class="flex flex-y-center">
        </div>
        <div class="flex flex-y-center">
          <RadioGroup
            v-model="criteria.returnOrderStatus"
            type="button"
            @on-change="loadData"
          >
            <Radio label="">全部</Radio>
            <Radio label="1">审核中</Radio>
            <Radio label="2">审核通过</Radio>
            <Radio label="3">审核驳回</Radio>
          </RadioGroup>
        </div>
      </div>
    </Card>


    <!-- 列表区 -->
    <BaseTable
      ref="table"
      :loading="tableLoading"
      v-model="criteria"
      :columns="columns"
      :data="tableData"
      @on-search="loadData"
    >
    </BaseTable>


    <!--  查看抽屉  -->
    <base-drawers
      v-model="showViewDrawers"
      title="订单信息"
      :showButton="false"
      @input="cancelBt('showViewDrawers')"
    >
      <detail ref="detail"></detail>
    </base-drawers>

    <!--  审核  -->
    <base-modal
      ref="auditModal"
      :loading="modalBtnLoading"
      :quxiao="quxiao"
      v-model="auditModal"
      @closeM="cancelBt('auditModal')"
      @closeBt="rejectBtn"
      @submitBt="okSave"
      titleText="退款订单详情"
      cancelText="驳回"
      okText="通过"
      :styles="{width: '600px'}"
    >
      <div style="padding: 14px 64px">
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 180px">居民姓名</span>
          <span class="ml10">{{ auditDetail.payName }}</span>
        </div>
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 180px">退款订单编号</span>
          <span class="ml10">{{ auditDetail.orderNo }}</span>
        </div>
<!--        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 40%">退款支付编号</span>
          <span class="ml10">{{ auditDetail.returnThirdNo || '-' }}</span>
        </div>-->
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 40%">身份证号</span>
          <span class="ml10">{{ auditDetail.payIdCard }}</span>
        </div>
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 40%">缴费类型</span>
          <span class="ml10">{{ this.tabsName === "yibaoorder" ? "医保" : "社保" }}</span>
        </div>
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 40%">缴费金额</span>
          <span class="ml10">{{ Number(auditDetail.orderAmount) / 100 }}</span>
        </div>
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 40%">退款金额</span>
          <span class="ml10">{{ Number(auditDetail.returnAmount) / 100 }}</span>
        </div>
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 40%">申请人</span>
          <span class="ml10">{{ auditDetail.submitInfo }}</span>
        </div>
        <div class="mb20 color333 line16">
          <span class="tr inlineblock" style="width: 40%">申请时间</span>
          <span class="ml10">{{ auditDetail.applyDate }}</span>
        </div>
        <div class="mb20 color333 line16" style="display:flex;width:100%">
          <div class="tr inlineblock" style="width:40%">退款说明</div>
          <div class="ml10" style="width:55%">{{ auditDetail.reason }}</div>
        </div>
        <div class="mt40 font20 fontwBold line28 tr" style="color: #FF0000;">
          退款金额：¥{{ Number(auditDetail.returnAmount) / 100 }}
        </div>
      </div>
    </base-modal>
    <!-- 审核驳回弹框 -->
    <base-modal
      ref="shenhbh"
      :loading="shbhloading"
      :quxiao="shbhqx"
      v-model="shbhmodel"
      @closeM="shbhclos"
      @closeBt="shbhcobt"
      @submitBt="shbhsub"
      titleText="驳回原因"
      cancelText="取消"
      okText="提交"
      :styles="{ width: '600px', top: '170px' }"
    >
      <div>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" inline>
          <FormItem
            prop="remark"
            label="驳回原因"
            style="
              display: flex;
              margin: 0 auto;
              justify-content: center;
              padding: 25px 0;
            "
          >
            <Input
              v-model="formInline.remark"
              type="textarea"
              :rows="5"
              placeholder="请输入驳回原因"
              :maxlength="150"
              style="width: 280px"
            />
          </FormItem>
        </Form>
      </div>
    </base-modal>
  </div>
</template>

<script>
import BaseModal from "_c/base-modal"
import BaseHeader from "./base-header"
import BaseDrawers from "_c/base-drawers/base-drawers";
import labelInfo from "_c/labelInfo/labelInfo";
import Detail from "../components/detail";

export default {
  components: {
    BaseModal,
    BaseHeader,
    BaseDrawers,
    labelInfo,
    Detail,
  },
  data() {
    return {
      formInline: {
        remark: "",
      },
      ruleInline: {
        remark: [
          { required: true, message: "请输入驳回原因", trigger: "blur" },
        ],
      },
      shbhmodel: false,
      shbhloading: false,
      shbhqx: false,
      spqxlist:[],
      titlevalue: "",
      tabsName: "",
      tableLoading: false,
      tableData: [], // 列表绑定数据
      /**
       * 查询条件
       */
      criteria: {
        total: 0,
        page: {
          current: 1,
          size: 10,
        },
        returnOrderStatus: "",
      },
      /**
       * 表格字段
       */
      columns: [
        {
          fixed: "left",
          title: "订单编号",
          key: "orderNo",
          align: "left",
          width: 240,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "姓名",
          key: "payName",
          width: 140,
          align: "left",
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "退款年份",
          key: "year",
          align: "left",
          minWidth: 100,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "身份证号",
          key: "payIdCard",
          align: "left",
          width: 190,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            return h("span", {style: {textAlign: "left"}},
              this.commonFn(params.row.payIdCard, 6, 4)
            );
          },
        },
        {
          title: "缴费金额",
          key: "orderAmount",
          align: "left",
          width: 100,
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              params.row.orderAmount ? params.row.orderAmount / 100 : 0
            );
          },
        },
        {
          title: "退款金额",
          key: "returnAmount",
          align: "left",
          width: 100,
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              params.row.returnAmount ? params.row.returnAmount / 100 : 0
            );
          },
        },
        {
          title: "提交人",
          key: "submitInfo",
          align: "left",
          width: 100,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "提交时间",
          key: "applyDate",
          align: "left",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "退款时间",
          key: "returnAmountDate",
          align: "left",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              params.row.returnAmountDate || '-'
            );
          },
        },
        {
          title: "退款状态",
          key: "returnOrderStatus",
          align: "left",
          width: 220,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            // 退款订单状态 0、新建 1、乡级审核通过 2、县级审核通过  3、退款驳回 5.退款成功 returnOrderStatus
            let orderStatus = "";
            if (params.row.returnOrderStatus == 0) {
              orderStatus = "创建成功，待乡级审核。";
            } else if (params.row.returnOrderStatus == 1) {
              orderStatus = "乡级审核成功，待县级审核。";
            } else if (params.row.returnOrderStatus == 2) {
              orderStatus = "审核通过";
            } else if (params.row.returnOrderStatus == 3) {
              orderStatus = "审核驳回";
            } else if (params.row.returnOrderStatus == 5) {
              orderStatus = "退款成功";
            }
            return h("span", {style: {textAlign: "left"}}, orderStatus);
          },
        },
        {
          title: "标签",
          key: "residentTagsList",
          align: "left",
          minWidth: 400,
          render: (h, params) => {
            var arr = []
            if (params.row.residentTagsList) {
              for (let i = 0; i < params.row.residentTagsList.length; i++) {
                arr.push(params.row.residentTagsList[i].tagName)
              }
            }
            return (
              <div>
                <labelInfo labelInfo={arr}></labelInfo>
              </div>
            );
          },
        },
        // 操作
        {
          title: "操作",
          slot: "action",
          align: "left",
          fixed: "right",
          width: 180,
          render: (h, params) => {
            return h("div", [
              h(
                "span",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  style: {
                    marginRight: "20px",
                    color: "#1577FE",
                    cursor: "pointer",
                  },
                  on: {
                    click: () => {
                      this.orderView(params.row);
                    },
                  },
                },
                "查看"
              ),
              h(
                "span",
                {
                  props: {
                    type: "text",
                    size: "small",
                  },
                  style: {
                    display: this.spqxlist.indexOf(params.row.returnOrderStatus) == -1 ? 'none' : '',
                    marginRight: "20px",
                    color: "#1577FE",
                    cursor: "pointer",
                  },
                  on: {
                    click: () => {
                      this.orderAudit(params.row);
                    },
                  },
                },
                "审核"
              ),
            ]);
          },
        },
      ],
      // 查看
      showViewDrawers: false,

      // 审核
      auditModal: false,
      modalBtnLoading: false,
      quxiao: false,
      auditDetail: {},  // 订单审核
    };
  },
  computed: {},
  watch: {},
  created() {
    this.ifshenhe()
    this.tabsName = this.$route.query.tabsName;
    let name = this.tabsName === "yibaoorder" ? "医保" : "社保";
    this.titlevalue = name + this.$route.meta.title;

    this.loadData();
  },
  methods: {
    // 审核驳回弹框确认按钮
    shbhsub() {
      this.$refs.formInline.validate((valid) => {
        if (valid) {
          this.shbhloading = true;
          this.APIS.pejectreturn({
            id: this.auditDetail.id,
            remark: this.formInline.remark,
          }).then((res) => {
            this.shbhloading = false;
            if (res.code == 20000) {
              this.shbhmodel = false;
              this.formInline.remark = "";
              this.$Message.success(res.message);
              this.auditModal = false;
              this.loadData();
            } else {
              this.$Message.warning(res.message);
            }
          });
        } else {

        }
      });
    },
    // 审核驳回弹框取消按钮
    shbhcobt() {
      this.shbhmodel = false;
      this.formInline.remark = "";
    },
    // 审核驳回弹框关闭回调
    shbhclos() {
      this.shbhmodel = false;
      this.formInline.remark = "";
    },
    onSearch(data) {
      this.criteria = {
        ...data,
        returnOrderStatus: this.criteria.returnOrderStatus,
      };
      this.loadData();
    },
    // 初始化获取列表数据
    loadData() {
      this.tableLoading = true;
      let data = {
        ...this.criteria,
      };
      let requestData = "";

      if (this.tabsName === "yibaoorder") {
        requestData = "orderPageTuiYiBao";
      } else {
        requestData = "orderPageTuiSheBao";
      }
      this.APIS[requestData](data).then((res) => {
        this.tableLoading = false;
        if (res.code == 20000) {
          this.criteria.total = res.data.total;
          this.tableData = res.data.records;
        } else {
          this.$Message.error(res.message)
        }
      }).catch(err => {
        this.tableLoading = false;
      });
    },
    // 查看
    orderView(params) {
      this.showViewDrawers = true;
      this.$refs.detail.getDetail(params);
      this.$refs.detail.order_return(params);
      this.$refs.detail.orderdetailfun(params);
    },
    // 关闭抽屉
    cancelBt(drawerName) {
      this[drawerName] = false;
    },
    // 审核
    orderAudit(params) {
      this.auditDetail = params;
      this.auditModal = true;
    },
    // 判断能不能审核
    ifshenhe(){
      this.APIS.auditstatus({ definitionId: "1" }).then((res) => {
        if (res.code == 20000) {
          this.spqxlist = res.data
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    // 审核驳回
    rejectBtn() {
      this.shbhmodel = true;
    },
    // 审核通过
    okSave() {
      this.modalBtnLoading = true;
      this.APIS.auditreturnorder({id: this.auditDetail.id, remark: ""}).then((res) => {
        this.modalBtnLoading = false;
        if (res.code == 20000) {
          this.$Message.success("审批成功");
          this.auditModal = false;
          this.loadData();
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
</style>
